<!--
* description: 备件销售收款 - 明细
* author: xiaochengzuan
* createdDate: 2021-2-23
-->
<template>
  <section class="editBigAreaInfo">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="销售单明细"
      :append-to-body="true"
      :visible.sync="curPopupsVisible"
      width="70%"
      @opened="openDialog"
      @close="closeEdit"
    >
      <dialogHeader
        slot="title"
        title="销售单明细"
        :style-type="$store.state.app.dialogType"
      />
      <one-table-template
        ref="multipleTable"
        :key="oneTableKey"
        v-loading="loading"
        :dynamic-table-cols="tableCols"
        :dynamic-form-fields="formField"
        :dynamic-is-show-select="false"
        :dynamic-is-init-table="true"
        :dynamic-table-defult-height="400"
      />

    </el-dialog>
  </section>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import { orgApis } from '@/api/pa/salesManagementOfSparePartsInOutlets'

export default {
  components: {
    OneTableTemplate,
    dialogHeader: () => import('@/components/dialogHeader')
  },

  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],

  props: {
    editPopupsVisibleDetail: { type: Boolean, default: false },

    // 从网格传入的编辑行数据(json)
    dynamicEditRowData: { type: Object, default: function() { return {} } }
  },

  data() {
    const viewPageCode = 'bigAreaInfo-edit'
    return {
      loading: false,
      // 动态生成网格列
      tableCols:
          [
            {
              prop: 'releaseId',
              label: '主键ID',
              hidden: true,
              alwaysHidden: true
            },
            {
              prop: 'updateControlId',
              label: '并发控制ID',
              hidden: true,
              alwaysHidden: true
            },

            {
              prop: 'partNo',
              label: '备件编号',
              hidden: false
            },
            {
              prop: 'partName',
              label: '备件名称'
            },
            {
              prop: 'partRepairTypeCn',
              label: '维修类型'
            },
            {
              prop: 'carConfigIdList',
              label: '适用车型'
            },
            {
              prop: 'pointPriceTax',
              label: '成本价'
            },
            {
              prop: 'salePrice',
              label: '销售价格'
            },
            {
              prop: 'dlrProfitMargin',
              label: '网点利润率'
            },
            {
              prop: 'saleQty',
              label: '销售数量'
            },
            {
              prop: 'saleAmount',
              label: '销售金额'
            }

          ],
      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(this, {
        partNo: '',
        partName: '',
        partRepairTypeCn: '',
        carConfigIdList: '',
        pointPriceTax: '',
        salePrice: '',
        dlrProfitMargin: '',
        saleQty: '',
        saleAmount: ''
      }, this.$ConfigCache.CacheConfig.cacheData[viewPageCode])
    }
  },

  methods: {
    openDialog() {
      this.queryDatas()
    },

    queryDatas() {
      const queryObj = {
        type: 'mutation',
        apiConfig: orgApis.querySalesOrderDetails,
        variables: { saleOrderId: this.dynamicEditRowData.saleOrderId }
      }
      var paramD = this.$getParams(queryObj)
      this.$requestAPI(paramD).then(response => {
        if (response.result === '1') {
          const list = response.rows
          this.$refs.multipleTable.list = list
        }
      })
    },

    closeEdit() {
      this.$emit('update:popupsVisible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.promptSpan{
  position: absolute;
  bottom: 26px;
  right: 335px;
  color: #e70020;
}
</style>

